<template>
    <div :style="style.height">
        <div class="top" :style="style.topHeight">
            <div class="container">
                <div class="van-uploader">
                    <img :src="front ? front : static" />
                    <input type="file" class="file" name="front" @change="changePic" />
                </div>
                <div class="title">身份证正面</div>
                <div class="van-uploader">
                    <img :src="back ? back: static" />
                    <input type="file" class="file" name="back" @change="changePic" />
                </div>
                <div class="title">身份证反面</div>
            </div>
            <div class="tip">
                <p>由于您购买的是海外直邮专区下的商品</p>
                <p>需要您提交您的身份证信息 以便海关查验</p>
            </div>
        </div>

        <div class="bot-btn ios_footer">
            <div class="btn" :class="{active: front!= '' && back!='' }" @click="returnOrder">确认</div>
        </div>
    </div>
</template>

<script>
    const HEIGHT = document.documentElement.clientHeight;
    import { commonMixin } from "@/common/mixin";
    export default {
        data() {
            return {
                style: {
                    height: {
                        height: HEIGHT + "px"
                    },
                    topHeight: {
                        "min-height": HEIGHT - 75 + "px"
                    }
                },
                static:
                    "http://iryoss3-0.oss-cn-beijing.aliyuncs.com/static/upimg.jpg",
                front: this.$route.query.front,
                back: this.$route.query.back
            };
        },
        mixins: [commonMixin],
        created() {},
        mounted() {},
        methods: {
            changePic(e) {
                this.showGlobaLoading();
                let file = e.target.files[0];
                let name = e.target.name;
                this.request.upPic({ type: 2, file: file }).then(
                    res => {
                        this.hideGlobaLoading();
                        this[name] = res;
                    },
                    res => {}
                );
            },
            returnOrder() {
                if (this.front != "" && this.back != "") {
                    this.$route.query.front = this.front;
                    this.$route.query.back = this.back;
                    this.$router.replace({
                        name: "order-created",
                        query: {
                            ...this.$route.query
                        }
                    });
                }
            }
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import '~assets/main.styl';

    * {
        box-sizing: border-box;
        overflow: hidden;
        ellipsis();
    }

    div {
        text-align: center;
        font-size: word14;
        line-height: vw(17);
        color: gray3;
    }

    img {
        width: vw(267);
        height: vw(136);
        margin: vw(30) auto middleMargin;
        display: block;
    }

    p {
        word-vw(word12, main-color);
        line-height: vw(17);
    }

    .top {
        height: 100%;
        margin-bottom: vw(50);
    }

    .container {
        width: 100%;
        background: grayF;
        margin-bottom: vw(30);
        padding: cellPadding;
    }

    .title {
        height: vw(20);
    }

    .van-uploader {
        position: relative;

        .file {
            position: absolute;
            top: vw(30);
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: vw(136);
            opacity: 0;
            cursor: pointer;
        }
    }

    .tip {
    }

    .bot-btn {
        height: vw(55);
        width: 100%;
        background: grayF;
        position: fixed;
        bottom: 0;
        left: 0;
        word-vw(word14, gray9);
        line-height: vw(19);
        flex-x(center);

        .btn {
            big-solid();
            width: vw(200);
            height: vw(35);
            background: #f3f3f3;
            word-vw(word14, gray9);
            line-height: vw(35);

            &.active {
                background: main-color;
                word-vw(word14, grayF);
            }
        }
    }
</style>